<template>
  <ContentDetailWrap :title="t('inventory.detail')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <!--    字段回显-->
    <el-form :model="form" label-width="auto">
      <div class="w-full flex justify-between">
        <div class="w-50%">
          <el-form-item :label="t('orderPayment.orderCode')">
            <el-input v-model="form.order_no" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.user')">
            <el-input v-model="form.user_name" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.receivingAccountNumber')">
            <el-input v-model="form.pay_account" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.feeType')">
            <el-input
              :model-value="
                form.fee_type === 1 ? t('orderPayment.orderFee') : t('orderPayment.logisticsFee')
              "
              disabled
            />
          </el-form-item>
          <el-form-item :label="t('orderPayment.transferType')">
            <el-input
              :model-value="useEnumeratePicker(transferTypeList, form.transfer_type)"
              disabled
            />
          </el-form-item>
          <el-form-item :label="t('orderPayment.theAmountToBePaid')">
            <el-input v-model="form.paid_amount" disabled />
          </el-form-item>
          <el-form-item
            :label="t('orderPayment.paymentTrackingCode')"
            v-if="form.payment_method !== 3"
          >
            <el-input v-model="form.pay_code" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.paymentLinks')" v-if="form.payment_method !== 3">
            <el-input v-model="form.payment_url" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.paymentStatus')">
            <el-select v-model="form.pay_status" disabled>
              <el-option
                v-for="item in payStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('orderPayment.reviewTime')" v-if="form.payment_method === 3">
            <el-input v-model="form.reviewer_time" disabled />
          </el-form-item>
        </div>
        <div class="w-50%">
          <el-form-item :label="t('orderPayment.theTypeOfOrder')">
            <el-select v-model="form.order_type" disabled>
              <el-option
                v-for="item in orderTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('orderPayment.paymentMethods')">
            <el-select v-model="form.payment_method" disabled>
              <el-option
                v-for="item in paymentMethodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('orderPayment.paymentTime')">
            <el-input v-model="form.pay_time" disabled />
          </el-form-item>
          <el-form-item
            :label="t('orderPayment.transactionTicketNumber')"
            v-if="form.payment_method !== 3"
          >
            <el-input v-model="form.voucher_code" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.paymentCurrency')" v-if="form.payment_method !== 3">
            <el-select v-model="form.pay_currency" disabled>
              <el-option
                v-for="item in currencyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('orderPayment.remarks')">
            <el-input v-model="form.notes" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.reviewers')" v-if="form.payment_method === 3">
            <el-input v-model="form.reviewer_name" disabled />
          </el-form-item>
          <el-form-item :label="t('orderPayment.proofOfTransfer')" v-if="form.payment_method === 3">
            <template v-if="form.transfer_voucher_url && form.transfer_voucher_url.length > 0">
              <el-image
                v-for="(imageUrl, index) in form.transfer_voucher_url"
                :key="index"
                style="width: 100px; height: 100px"
                :preview-teleported="true"
                :src="imageUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="form.transfer_voucher_url"
                fit="cover"
              />
            </template>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getPayEnumApi } from '@/api/order/pay'
import { useEnumeratePicker } from '@/utils'

const { t } = useI18n()
const { go } = useRouter()
const { query } = useRoute()

const form = ref<Record<string, any>>({})

const orderStatusList = ref<Array<Record<string, any>>>([])
const orderTypeList = ref<Array<Record<string, any>>>([])
const paymentMethodList = ref<Array<Record<string, any>>>([])
const payStatusList = ref<Array<Record<string, any>>>([])
const currencyList = ref<Array<Record<string, any>>>([])
const payTypeList = ref<Array<Record<string, any>>>([])
const transferTypeList = ref<Array<Record<string, any>>>([])

//获取枚举
const getDropDownBoxInfo = async () => {
  form.value = JSON.parse(decodeURIComponent(query?.data as string))
  const resp = await getPayEnumApi({ field: 'all' })
  orderTypeList.value = resp.data.order_type
  payStatusList.value = resp.data.pay_status
  paymentMethodList.value = resp.data.payment_method
  currencyList.value = resp.data.currency
  orderStatusList.value = resp.data.order_status
  payTypeList.value = resp.data.pay_type
  transferTypeList.value = resp.data.transfer_type
}

onMounted(() => {
  getDropDownBoxInfo()
})
</script>
<style lang="less" scoped></style>
